@use './theme' as theme;
@use 'sass:meta';
@use 'sass:map';

.luna-setting {
  font-family: theme.$font-family;
  color: var(--aya-color-text);
  background: var(--aya-color-bg-container);
}

.luna-setting-item {
  &:hover,
  &.luna-setting-selected {
    background: none;
  }
  &.luna-setting-selected:focus {
    outline: none;
  }
}

.luna-setting-item-select {
  .luna-setting-select {
    select {
      color: var(--aya-color-text);
      border-color: var(--aya-color-border);
      background: var(--aya-color-bg-container);
    }
    &:after {
      border-top-color: var(--aya-color-text);
    }
  }
}

.luna-setting-item-button {
  button {
    color: #fff;
    background: var(--aya-color-primary);
    border: none;
    padding: 2px 14px;
    font-size: 13px;
    &:hover {
      background: var(--aya-color-primary-hover);
    }
    &:active {
      background: var(--aya-color-primary-active);
      border: none;
    }
  }
}

.luna-setting-item-number {
  input[type='number'] {
    background: var(--aya-color-bg-container);
    border-color: var(--aya-color-border);
    color: var(--aya-color-text);
  }
  .luna-setting-range-container {
    .luna-setting-range-track {
      .luna-setting-range-track-bar {
        background: var(--aya-color-border);
        .luna-setting-range-track-progress {
          background: var(--aya-color-primary);
        }
      }
    }
    input::-webkit-slider-thumb {
      border-color: var(--aya-color-border);
      background: var(--aya-color-white);
    }
  }
}

.luna-setting-item-separator {
  border-color: var(--aya-color-border);
}

.luna-setting-item-input {
  input {
    background: var(--aya-color-bg-container);
    border-color: var(--aya-color-border);
    color: var(--aya-color-text);
  }
}

.luna-toolbar {
  color: var(--aya-color-text);
  background: var(--aya-color-bg-container);
  border-bottom-color: var(--aya-color-border);
  .luna-toolbar-item-separator {
    background: var(--aya-color-border);
  }
  .luna-toolbar-item-button {
    button {
      color: var(--aya-color-text);
      &:hover,
      &.luna-toolbar-hover {
        background: var(--aya-color-fill-secondary);
        border-color: var(--aya-color-border);
      }
      &:active,
      &.luna-toolbar-active {
        border-color: var(--aya-color-border);
        background: var(--aya-color-fill-tertiary);
      }
    }
  }
  .luna-toolbar-item-select {
    select {
      color: var(--aya-color-text);
      background: var(--aya-color-bg-container);
      border-color: var(--aya-color-border);
    }
    &:after {
      border-top-color: var(--aya-color-text);
    }
  }
  .luna-toolbar-item-input {
    input {
      background: var(--aya-color-bg-container);
      border-color: var(--aya-color-border);
      color: var(--aya-color-text);
    }
  }
  .luna-toolbar-item-number {
    input[type='number'] {
      background: var(--aya-color-bg-container);
      border-color: var(--aya-color-border);
      color: var(--aya-color-text);
    }
  }
  .luna-toolbar-item-checkbox {
    input {
      border-color: var(--aya-color-border);
      &:checked {
        background-color: var(--aya-color-primary);
        border-color: var(--aya-color-primary);
      }
    }
  }
}

.luna-tab {
  color: var(--aya-color-text);
  background: var(--aya-color-bg-container);
}

.luna-tab-tabs-container {
  border-color: var(--aya-color-border);
}

.luna-tab-item {
  &.luna-tab-selected,
  &:hover {
    background: var(--aya-color-fill-tertiary);
  }
}

.luna-tab-slider {
  background: var(--aya-color-primary);
}

.luna-modal {
  top: 28px;
  font-family: theme.$font-family;
  z-index: theme.$z-index-popup-base;
}

.luna-modal-body,
.luna-modal-input {
  color: var(--aya-color-text);
  background: var(--aya-color-bg-container);
}

.luna-modal-input {
  user-select: text !important;
  border-color: var(--aya-color-border);
}

.luna-modal-button-group {
  .luna-modal-secondary {
    border-color: var(--aya-color-border);
    color: var(--aya-color-text);
    background: var(--aya-color-bg-container);
  }
  .luna-modal-primary {
    background: var(--aya-color-primary);
  }
  .luna-modal-button {
    &:active {
      &::before {
        background: var(--aya-color-primary);
      }
    }
  }
}

.luna-notification {
  padding-top: 40px;
  z-index: theme.$z-index-popup-base;
}

.luna-notification-item {
  font-family: theme.$font-family;
  border-radius: 4px;
  color: var(--aya-color-text);
  background: var(--aya-color-bg-container);
  box-shadow: var(--aya-box-shadow);
  padding: 5px 10px;
  border: 1px solid var(--aya-color-border);
}

.luna-image-viewer {
  border: none;
  background: var(--aya-color-bg-container);
}

.luna-logcat {
  border: none;
  color: var(--aya-color-text);
  background: var(--aya-color-bg-container);
}

.luna-logcat-W {
  .luna-logcat-priority {
    background: var(--aya-color-warning-text);
  }
  .luna-logcat-message {
    color: var(--aya-color-warning-text);
  }
}

.luna-logcat-E {
  .luna-logcat-priority {
    background: var(--aya-color-error-text);
  }
  .luna-logcat-message {
    color: var(--aya-color-error-text);
  }
}

.luna-logcat-D {
  .luna-logcat-priority {
    background: var(--aya-color-success-text);
  }
}

.I {
  .luna-logcat-priority {
    background: var(--aya-color-info-text);
  }
}

$colors: 'blue', 'purple', 'cyan', 'green', 'magenta', 'pink', 'red', 'orange',
  'yellow', 'volcano', 'geekblue', 'gold', 'lime';

$variables: meta.module-variables(theme);
@each $color in $colors {
  @for $i from 6 through 10 {
    .luna-logcat-color-#{$color}-#{$i} {
      $variable-name: #{$color}-#{$i};
      color: map.get($variables, $variable-name);
    }
  }
}

.-theme-with-dark-background {
  @each $color in $colors {
    @for $i from 6 through 10 {
      .luna-logcat-color-#{$color}-#{$i} {
        $variable-name: #{$color}-#{$i}-dark;
        color: map.get($variables, $variable-name);
      }
    }
  }
}

.luna-data-grid {
  color: var(--aya-color-text);
  background: var(--aya-color-bg-container);
  border-color: var(--aya-color-border);
  &:focus {
    .luna-data-grid-data-container {
      .luna-data-grid-node.luna-data-grid-selected {
        background: var(--aya-color-primary);
      }
    }
  }
  th,
  td {
    border-color: var(--aya-color-border);
  }
  th {
    background: var(--darker-background);
    &.luna-data-grid-sortable {
      &:hover,
      &:active {
        color: var(--select-foreground);
        background: var(--highlight);
      }
    }
  }
  .luna-data-grid-data-container {
    .luna-data-grid-node.luna-data-grid-selected,
    .luna-data-grid-node.luna-data-grid-selectable:hover {
      color: #fff;
      background: var(--aya-color-primary);
    }
    tr:nth-child(even) {
      background: var(--aya-color-fill-alter);
    }
  }
}

.luna-performance-monitor {
  background: var(--aya-color-bg-container) !important;
  border: none;
}

.luna-performance-monitor-title {
  display: inline-block;
  height: 16px;
  font-size: #{theme.$font-size}px;
  line-height: 16px;
}

.luna-icon-list-item {
  color: var(--aya-color-text);
  &.luna-icon-list-selected {
    .luna-icon-list-icon {
      background-color: var(--aya-color-border);
    }
    .luna-icon-list-name {
      background-color: var(--aya-color-primary);
    }
  }
}

.luna-command-palette {
  top: 28px;
  z-index: theme.$z-index-popup-base;
  color: var(--aya-color-text);
}

.luna-command-palette-body {
  background: var(--aya-color-bg-container);
  border: 1px solid var(--aya-color-border);
  padding: #{theme.$padding-x-x-s}px;
  border-radius: #{theme.$border-radius-x-s}px;
}

.luna-command-palette-input {
  border-radius: #{theme.$border-radius-x-s}px;
  border: 1px solid var(--aya-color-border);
  padding: #{theme.$padding-x-x-s}px;
  margin-bottom: #{theme.$margin-x-x-s}px;
  color: var(--aya-color-text);
}

.luna-command-palette-list {
  li {
    border-radius: #{theme.$border-radius-x-s}px;
    &:hover {
      background: var(--aya-color-fill-secondary);
    }
    &.luna-command-palette-active {
      background: var(--aya-color-primary);
    }
  }
}
